
<template>
  <!-- 模版引用 -->
  <main ref="main">
    <section>
      study1
      <span>span</span>
    </section>
    <ul>
      <li v-for="item in 3" :key="item" ref="items">
        {{ item }}
      </li>
    </ul>
    <!-- v-bind -->
    <section>
      <div v-bind="pagState">bind</div>
    </section>
    <!-- watchEffect -->
    <button @click="pagState.pageSize++;compObj.name = 'wjy1'+ Math.random().toFixed(2)">pageSize++  {{ pagState.pageNumber }}</button>
    <!-- computed -->
    <div>
      {{ newPageNumberAdd1 }}  {{  newPageNumberAddMenthod() }}
    </div>
    <div>
      <child ref="childComp"  />
    </div>
    <!-- 组件 -->
     <comp></comp>
</main>

</template>
<script setup>
import { ref, useTemplateRef, onMounted, nextTick, reactive, watch, watchEffect, onWatcherCleanup, computed } from 'vue';
import { omit, pick } from 'lodash';
import child from "./child.vue";
import comp from "./comp.vue";

// 学习 useTemplateRef
let mainRef = useTemplateRef("main");
let itemsRef = useTemplateRef("items"); // 列表模版引用
let compRef = useTemplateRef("childComp"); // 组件模版引用
nextTick(() => { 
  // console.dir(mainRef.value);
  // console.dir(mainRef.value?.querySelector("span"));
  console.log(mainRef.value?.getBoundingClientRect());
  console.log("itemsRef:", itemsRef.value);
  console.log("compRef:", compRef.value); 
})
onMounted(() => {
  // console.log("mainRef2:", mainRef.value);
});

// 学习v-bind
let pagState = reactive({
  pageSize: 10,
  pageNumber: 1,
  total: 20
})

// 学习omit
// console.log("omit", omit(
//   {name: "wjy", age: 1},
//   ["name"]
// ));

// watch、watchEffect
let compObj = reactive({name: "wjy", age: 1});
watchEffect(() => {
  pagState.pageNumber = pagState.pageSize;
})
let timeputMechine = null;
watch(() => pagState.pageSize, (newVal, oldVal, onCleanup) => {
  // console.log("watch", newVal, oldVal, onCleanup);
  timeputMechine = setTimeout(() => {
    // console.log("setTimeout", pagState.pageSize);
  }, 4000)

  onWatcherCleanup(() => {
    clearTimeout(timeputMechine);
    // console.log("onWatcherCleanup", pagState.pageSize);
  })
});
watch(compObj, (newVal, oldVal) => {
  // console.log("watch compObj", newVal, oldVal);
});

// 对象的getter
let obj1 = {name: "wjy", age: 1, get nameAge() { return this.name + this.age; }};
obj1.name = "wjy2";
// console.log(obj1.nameAge);

// computed
let newPageNumberAdd1 = computed(() => {
  return pagState.pageSize + 1;
});
console.log(newPageNumberAdd1.value);
function newPageNumberAddMenthod() {
  console.log("一直被加载--");
  return pagState.total + "-" + 1;
}


</script>